<template>
  <div>
    <card class="list-card-container">
      <t-row justify="space-between">
        <div class="left-operation-container">
          <t-button @click="handleSetupContract"> 新建合同 </t-button>
          <t-button variant="base" theme="default" :disabled="!selectedRowKeys.length"> 导出合同 </t-button>
          <p v-if="!!selectedRowKeys.length" class="selected-count">已选{{ selectedRowKeys.length }}项</p>
        </div>
        <t-input v-model="searchValue" class="search-input" placeholder="请输入你需要搜索的内容" clearable>
          <template #suffix-icon>
            <search-icon size="20px" />
          </template>
        </t-input>
      </t-row>

      <t-table
        :data="data"
        :columns="COLUMNS"
        :row-key="rowKey"
        vertical-align="top"
        :hover="true"
        :pagination="pagination"
        :selected-row-keys="selectedRowKeys"
        :loading="dataLoading"
        @page-change="rehandlePageChange"
        @change="rehandleChange"
        @select-change="rehandleSelectChange"
      >
        <template #status="{ row }">
          <t-tag v-if="row.status === CONTRACT_STATUS.FAIL" theme="danger" variant="light"> 审核失败 </t-tag>
          <t-tag v-if="row.status === CONTRACT_STATUS.AUDIT_PENDING" theme="warning" variant="light"> 待审核 </t-tag>
          <t-tag v-if="row.status === CONTRACT_STATUS.EXEC_PENDING" theme="warning" variant="light"> 待履行 </t-tag>
          <t-tag v-if="row.status === CONTRACT_STATUS.EXECUTING" theme="success" variant="light"> 履行中 </t-tag>
          <t-tag v-if="row.status === CONTRACT_STATUS.FINISH" theme="success" variant="light"> 已完成 </t-tag>
        </template>
        <template #contractType="{ row }">
          <p v-if="row.contractType === CONTRACT_TYPES.MAIN">审核失败</p>
          <p v-if="row.contractType === CONTRACT_TYPES.SUB">待审核</p>
          <p v-if="row.contractType === CONTRACT_TYPES.SUPPLEMENT">待履行</p>
        </template>
        <template #paymentType="{ row }">
          <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.PAYMENT" class="payment-col">
            付款<trend class="dashboard-item-trend" type="up" />
          </div>
          <div v-if="row.paymentType === CONTRACT_PAYMENT_TYPES.RECIPT" class="payment-col">
            收款<trend class="dashboard-item-trend" type="down" />
          </div>
        </template>

        <template #op="slotProps">
          <a class="t-button-link" @click="handleClickDetail()">详情</a>
          <a class="t-button-link" @click="handleClickDelete(slotProps)">删除</a>
        </template>
      </t-table>
    </card>

    <t-dialog
      v-model:visible="confirmVisible"
      header="确认删除当前所选合同？"
      :body="confirmBody"
      :on-cancel="onCancel"
      @confirm="onConfirmDelete"
    />
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { SearchIcon } from 'tdesign-icons-vue-next';
import { MessagePlugin } from 'tdesign-vue-next';

import { CONTRACT_STATUS, CONTRACT_TYPES, CONTRACT_PAYMENT_TYPES } from '@/constants';
import Trend from '@/components/trend/index.vue';
import Card from '@/components/card/index.vue';
import { ResDataType } from '@/interface';
import request from '@/utils/request';

import { COLUMNS } from './constants';

export default defineComponent({
  name: 'ListBaseCard',
  components: {
    Card,
    SearchIcon,
    Trend,
  },
  setup() {
    const data = ref([]);
    const pagination = ref({
      defaultPageSize: 20,
      total: 100,
      defaultCurrent: 1,
    });

    const searchValue = ref('');

    const dataLoading = ref(false);
    const fetchData = async () => {
      dataLoading.value = true;
      try {
        const res: ResDataType = await request.get('/api/get-list');
        if (res.code === 0) {
          const { list = [] } = res.data;
          data.value = list;
          pagination.value = {
            ...pagination.value,
            total: list.length,
          };
        }
      } catch (e) {
        console.log(e);
      } finally {
        dataLoading.value = false;
      }
    };

    const deleteIdx = ref(-1);
    const confirmBody = computed(() => {
      if (deleteIdx.value > -1) {
        const { name } = data.value[deleteIdx.value];
        return `删除后，${name}的所有合同信息将被清空，且无法恢复`;
      }
      return '';
    });

    onMounted(() => {
      fetchData();
    });

    const confirmVisible = ref(false);

    const selectedRowKeys = ref([1, 2]);

    const router = useRouter();

    const resetIdx = () => {
      deleteIdx.value = -1;
    };

    const onConfirmDelete = () => {
      // 真实业务请发起请求
      data.value.splice(deleteIdx.value, 1);
      pagination.value.total = data.value.length;
      const selectedIdx = selectedRowKeys.value.indexOf(deleteIdx.value);
      if (selectedIdx > -1) {
        selectedRowKeys.value.splice(selectedIdx, 1);
      }
      confirmVisible.value = false;
      MessagePlugin.success('删除成功');
      resetIdx();
    };

    const onCancel = () => {
      resetIdx();
    };

    return {
      CONTRACT_STATUS,
      CONTRACT_TYPES,
      CONTRACT_PAYMENT_TYPES,
      COLUMNS,
      data,
      searchValue,
      dataLoading,
      pagination,
      confirmBody,
      confirmVisible,
      rowKey: 'index',
      onConfirmDelete,
      onCancel,
      selectedRowKeys,
      rehandleSelectChange(val: number[]) {
        selectedRowKeys.value = val;
      },
      rehandlePageChange(curr, pageInfo) {
        console.log('分页变化', curr, pageInfo);
      },
      rehandleChange(changeParams, triggerAndData) {
        console.log('统一Change', changeParams, triggerAndData);
      },
      handleClickDetail() {
        router.push('/detail/base');
      },
      handleSetupContract() {
        router.push('/form/base');
      },
      handleClickDelete(row: { rowIndex: any }) {
        deleteIdx.value = row.rowIndex;
        confirmVisible.value = true;
      },
    };
  },
  methods: {},
});
</script>
<style lang="less" scoped>
@import '@/style/variables';

.payment-col {
  display: flex;

  .trend-container {
    display: flex;
    align-items: center;
    margin-left: 8px;
  }
}

.left-operation-container {
  padding: 6px 0;
  margin-bottom: 16px;

  .selected-count {
    display: inline-block;
    margin-left: 8px;
    color: @text-color-secondary;
  }
}

.search-input {
  width: 360px;
}
</style>
